<template>
	<view class="content" style="padding-bottom:182rpx">
        <!-- navbar -->
        <u-navbar :fixed="true" :shadow="true" :safeAreaInsetTop="true" :placeholder="true"
            @leftClick="back" title="新增人员调岗">
        </u-navbar>

        <!-- content -->
        <view class="uni-area">
            <view class="u-m-t-50 u-flex u-row-between">
                <text class="u-font-32 font-bold">调岗班组</text>
                <text v-if="!id" class="u-font-28 uni-higt-color" @tap.stop="menuSkip('/pages/team-bag/list?type=transfer1')">选择班组</text>
            </view>
            <uni-item-team class="u-m-t-20" v-if="JSON.stringify(transferGroup)!='{}'" :listItem="transferGroup"></uni-item-team>

            <view v-if="id">
                <view class="u-m-t-50 u-font-32 font-bold">人员信息</view>
                <view v-if="id" class="u-m-t-30 uni-shadow u-p-t-10 staff" v-for="(tem,ind) in staffList" :key="ind">
                    <u-row customStyle="flex-wrap:wrap">
                        <u-col v-for="(item,index) in tem" :key="index" :span="item.span"
                            v-if="index!=0" class="u-m-t-20 u-font-26" style="flex-direction:row">
                            <text v-if="index==2" :class="['transfer',item.value!='是'?'uni-higt-color':'uni-gery-color']" 
                                @tap.stop="transferClick(item.value,ind,tem[0].value)">
                                调岗
                            </text>
                            <text class="u-m-r-14 uni-dec-color">{{item.title}}</text>
                            <text v-if="item.field=='_status'" :style="{color:item.value=='已变更'?'#dd524d':'#4cd964'}">{{item.value}}</text>
                            <text v-else class="u-line-1">{{item.value}}</text>
                        </u-col>
                    </u-row>
                </view>
            </view>

            <view v-if="id" class="u-m-t-50 u-font-32 font-bold">调岗原因</view>
            <u--textarea v-if="id" class="u-m-t-20 textarea" v-model="submitData.reason" 
                :autoHeight="true" placeholder="请输入调岗原因" placeholderClass="uni-placeholder">
            </u--textarea>
 
            <!-- 附件 -->
            <uni-accessory v-if="id" class="u-m-t-50"
                :title="{title:'附件'}" :accessorys="accessoryList"
                :upload="true" :uploadParameter="uploadParameter" @uploadSucceed="uploadSucceed">
            </uni-accessory>
        </view>

        <!-- 底部操作 -->
        <view class="uni-bottom u-flex u-row-between">
            <u-button class="btn3" text="取消" @tap="back"></u-button>
            <u-button class="btn4" type="primary" :text="id?'修改':'保存'" @tap="submit"> </u-button>
        </view>
	</view>
</template>

<script>
import {mapGetters,mapMutations} from 'vuex'
export default {
    data() {
        return {
            submitData: {  // 业务保存参数
                sjly: 'app', // 数据来源【必填】
                gcbh: uni.getStorageSync("userInfo").ssgcbh, // 项目编号【必填】
                gcmc: uni.getStorageSync("userInfo").ssgcmc, // 项目名称【必填】
                groupid: '', // 班组编号【必填】
                groupname: '', // 班组名称【必填】
            },
            type: 'add', // 默认为新增
            id: null, // 调岗业务Id
            staffList: [], // 当前班组下的人员信息
            staffItem:[
                { field:'id', title:'ID', span:6, value:'' },
                { field:'staffname', title:'姓名', span:6, value:'' },
                { field:'isleader', title:'是否班组长', span:6, value:'' },
                { field:'idcard', title:'证件号码', span:12, value:'' },
                { field:'origroupname', title:'原班组', span:6, value:'' },
                { field:'taggroupname', title:'变更班组', span:6, value:'' },
                { field:'_status', title:'变更状态', span:6, value:'未变更' },
            ],
            index: 0, // 默认操作的第一个人员调岗
            ryhb: null, // 第一个人员的业务编号
            accessoryList:[], // 附件
            uploadParameter: { // 上传附件的参数
                ywlx: 'salary_smzgl_modifygroup',
            },
        }
    },

    computed: {
        ...mapGetters(['transferGroup','selectTransferGroup']),
    },

    onLoad(option) {
        if( option.id ){
            this.type = 'edit'
            this.id = option.id
            this.getDetail()
        }
    },

    watch:{
        transferGroup(newVal,old){
            // 业务保存
            if( this.type == 'add' ) {
                this.submitData.groupid = newVal.id
                this.submitData.groupname = newVal.bzmc
                this.ywSave()
            }
        },
        selectTransferGroup(newVal,old){
            // 调岗
            if( JSON.stringify(newVal)!='{}' ) this.transferFn(newVal.id,newVal.bzmc)
        }
    },

    methods: {
        ...mapMutations(['setTransferGroup','setSelectTransferGroup']),
        // 返回
        back(){
            uni.navigateBack()
        },
        // 跳转
        menuSkip(url){
            uni.navigateTo({ url: url })
        },

        // 业务保存
        ywSave(){
            this.$request(this,this.$apis.memberTransferSave,this.submitData).then(res=>{
                // console.log('业务保存',res.id)
                this.id = res.id
                this.getStaffList()
                this.getAccessoryList(res.id)
                // this.getYwbh()
            }).then()
        },

        // 查看当前班组下的人员
        getStaffList(){
            this.$request(this,this.$apis.memberTransferMemberList,{modifygroupid:this.id}).then(res=>{
                // console.log('人员列表',res)
                this.staffList = []
                res.map((v,i)=>{
                    const temporaryData = JSON.parse(JSON.stringify(this.staffItem)) 
                    temporaryData.map((a,b)=>{
                        if( a.field == 'isleader' ){
                            a.value = v[a.field]==1?'是':'否'
                        }else if(a.field == 'idcard'){
                            a.value = this.$tools.formatIdentity(v[a.field])
                        }else if(a.field == '_status'){
                            a.value = v.taggroupname?'已变更':'未变更'
                        }else{
                            a.value = v[a.field]?v[a.field]:'暂无数据源'
                        }
                    })
                    this.staffList.push(temporaryData)
                })
            })
        },


        // 获取业务编号
        getYwbh(){
            this.$request(this,this.$apis.GetYwbh,{ ywlx:'salary_smzgl_modifygroup' }).then(res=>{
                // console.log('业务编号',res)
                this.getAccessoryList(res)
            }).then()
        },

        // 调岗操作
        transferClick(value,ind,id){
            if( value!='是' ){
                this.index = ind
                this.ryhb = id
                this.menuSkip('/pages/team-bag/list?type=transfer2')
            }
        },
        // 调岗方法
        transferFn(taggroupid,bzmc){
            const par = {
                id: this.ryhb,
                taggroupid: taggroupid
            }
            this.$request(this,this.$apis.memberTransferModify,par).then(res=>{
                console.log('调岗',res)
                this.staffList[this.index][5].value = bzmc
                this.staffList[this.index][6].value = '已变更'
            })
        },

        // 详情
        getDetail(){
            this.$request(this,this.$apis.memberTransferDetail,{id:this.id}).then(res=>{
                // console.log('详情',res)
                this.submitData.id = res.id
                this.submitData.groupid = res.groupid
                this.submitData.groupname = res.groupname
                this.setTransferGroup({
                    bzmc: res.groupname, // 班组名称
                    qymc: res.qymc, // 所属单位
                    bzzxm: res.groupleadername, // 班组长
                    bzzlxdh: res.groupleaderphone, // 电话
                    cyrs: '暂无字段' // 班组人数
                })
                this.getStaffList()
                this.getAccessoryList(res.id)
            })
        },

        // 申请提交
        submit(){
            if( !this.submitData.groupid ) {
                uni.$u.toast('请选择调岗班组')
                return false
            }
            if( !this.submitData.reason ){
                uni.$u.toast('请输入调岗原因')
                return false
            }
            uni.showLoading({ title:'修改中' })
            if( this.id ) this.submitData.id = this.id
            this.$request(this,this.$apis.memberTransferEdit,this.submitData).then(res=>{
                uni.$u.toast('修改成功',1500)
                setTimeout(()=>{
                    this.back()
                },1500)
            }).then()
        },

        // 附件列表
        getAccessoryList(ywbh){
            const parameter = {
                ywlx: this.uploadParameter.ywlx, // 业务类型
                ywbh: ywbh, // 业务编号
            }
            uni.showLoading({ title:'附件列表获取中' })
            this.$request(this,this.$apis.MemberAtta,parameter).then(res=>{
                // console.log('附件列表',res)
                this.accessoryList = res
                if( res ){
                    this.uploadParameter.bid = ywbh
                    this.uploadParameter.attachType = res[0].attachType
                }
            }).then()
        },
        // 上传附件成功
        uploadSucceed(){
            this.getAccessoryList( this.id )
        }
    }
}
</script>

<style scoped lang="scss">
    .content{
        .staff{
            position: relative;
            .transfer{
                position: absolute;
                right: 30rpx;
                top: 30rpx;
            }
        }
        // 文本域
        .textarea{
            border: none;
            padding: 40rpx 30rpx;
            background: #f4f5f7;
            border-radius: 16rpx;
            /deep/.uni-textarea-textarea{
                font-size: 28rpx !important;
            }
        }
    }
</style>
